<template>
  <div>
    <!--    功能区域-->
    <div style="margin: 10px 0; text-align: left">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column fixed prop="id" label="水果id"> </el-table-column>
      <el-table-column prop="name" label="水果名字"> </el-table-column>
      <el-table-column prop="sale" label="销量"> </el-table-column>
      <el-table-column prop="icon" label="图片">
        <template #default="scope">
          <img :src="scope.row.icon" style="height: 70px" />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="400px">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            plain
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="small" type="primary" plain @click="bar()"
            >柱状图</el-button
          >
          <el-button size="small" type="primary" plain @click="pie()"
            >饼状图</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="新增水果" v-model="dialogVisible" width="50%">
      <el-form
        ref="fruitRules"
        :model="fruit"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
        style="width: 600px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="fruit.name"></el-input>
        </el-form-item>
        <el-form-item label="销量" prop="sale">
          <el-input v-model.number="fruit.sale"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="icon">
          <el-input v-model="fruit.icon"></el-input>
        </el-form-item>
        <el-form-item>
          <!--     <el-button type="primary" @click="onSubmit('fruitRules')">立即创建</el-button>
                    <el-button @click="oncancel()">取消</el-button> -->
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "FruitList",
  components: {},
  data() {
    return {
      loading: true,
      dialogVisible: false,
      currentPage: 1,
      pageSize: 3,
      total: 0,
      tableData: [],
      fruit: {
        name: "",
        sale: "",
        icon: "",
      },
      rules: {
        name: [{ required: true, message: "请输入水果名称", trigger: "blur" }],
        sale: [
          { required: true, message: "请输入销量", trigger: "blur" },
          { type: "number", message: "销量必须为数字值" },
        ],
        icon: [{ required: true, message: "请输入图片链接", trigger: "blur" }],
      },
    };
  },
  methods: {
    add() {
      this.dialogVisible = true;
      this.fruit = {};
    },
    handleEdit(row) {
      this.fruit = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(id) {
      console.log(id);
      request.delete("/fruit/deleteFruitById/" + id).then((res) => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: "删除成功",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.load(); // 删除之后重新加载表格的数据
      });
    },

    save() {
      if (this.fruit.id) {
        // 更新
        request.put("/fruit/editFruit", this.fruit).then((res) => {
          console.log(res);
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: "更新成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.load(); // 刷新表格的数据
          this.dialogVisible = false; // 关闭弹窗
        });
      } else {
        // 新增
        request.post("/fruit/addFruit", this.fruit).then((res) => {
          console.log(res);
          if (res.code === "0") {
            this.$message({
              type: "success",
              message: "新增成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }

          this.load(); // 刷新表格的数据
          this.dialogVisible = false; // 关闭弹窗
        });
      }
    },

    bar() {
      this.$router.push("/bar");
    },
    pie() {
      this.$router.push("/pie");
    },
    load() {
      var _this = this;
      request
        .get("/fruit/getFruitsTable", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          },
        })
        .then(function (response) {
          console.log("fruit:" + response.data);
          _this.tableData = response.data.records;
          _this.total = response.data.total;
        });
    },
    handleSizeChange(pageSize) {
      // 改变当前每页的个数触发
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      // 改变当前页码触发
      this.currentPage = pageNum;
      this.load();
    },
  },
  created() {
    this.load();
  },
};
</script>
